<template>
	<view class="root">
		<!-- 轮播图 -->
		<view class="index">
			<swiper indicat or-dots circular autoplay>
				<swiper-item v-for="(item,index) in lists" :key="item.id">
					<image :src="item.image_src"></image>
				</swiper-item>
			</swiper> 
		</view>
		<!-- 滑块 -->
		<scroll-view scroll-x="true" class="scroll-content" :scroll-into-view="scrollIntoIndex">
			<view :id="'top'+index" class="scroll-item" v-for="(item,index) in topBar" :key="index" @tap="changeTab(index)">
				<text :class="topBarIndex === index? 'f-active-color':'f-color' ">
				{{item.floor_title.name}}
				</text>
			</view>
		</scroll-view>
		<!-- 滑块显示内容 -->
		<swiper @change="onchangeTab" :current="topBarIndex">
			<swiper-item v-for="(item,index) in topBar" :key="index">
				<Recommend :recommendListDetial="recommendListDetial"></Recommend>
			</swiper-item>
		</swiper>
		
		
		<Card cardTitle="猜你喜欢"></Card> 
		<CommodityList @goGoodsDetail="goGoodsDetail" :commodity="commodity"></CommodityList>
		<view class="isOver" v-if="flag">-----我是有底线的-----</view>
		<!-- <Card cardTitle="好物推荐"></Card> -->
	</view>

</template>

<script>
	import Recommend from '@/components/index/Recommend.vue'
	import Card from '@/components/common/Card.vue'
	import CommodityList from '@/components/common/CommodityList.vue'
	export default {
		data() {
			return {
				commodity:[],
				// 滑块跟随索引
				scrollIntoIndex:'top0',
				topBarIndex:0,
				lists: [],
				recommendList: [],
				recommendListDetial: [],
				topBar: [],
				pagenum: 1,
				flag: false
			}
		},
		onLoad() {
			this.getSwipers(),
				// this.getRecommend(),
				this.getTopBar(),
				this.getCommodity()
		},
		onNavigationBarButtonTap(e){
			console.log(444333555,e)
			if(e.index == 0){
				uni.navigateTo({
					url:'../search/search'
				})
			}else{
				console.log("进入消息页面")
			}
		},
		methods: {
			// //获取轮播图的数据
			async getSwipers() {
				const res = await this.$myRequest({
					url: '/api/public/v1/home/swiperdata'
				})
				this.lists = res.data.message
				// console.log(11111111, this.lists)
			},
			//获取推荐
			// async getRecommend() {
			// 	const res = await this.$myRequest({
			// 		url: '/api/public/v1/home/floordata'
			// 	})
			// 	this.recommendList = res.data.message
			// 	// console.log(1112222, res.data.message)
			// 	// console.log(1112222, this.recommendList)
			// },
			//获取topBar
			async getTopBar() {
				const res = await this.$myRequest({
					url: '/api/public/v1/home/floordata'
				})
				this.topBar = res.data.message
				this.recommendList = res.data.message
				this.recommendListDetial = this.recommendList[0]
				// console.log(1112222)
				// console.log(1112222, res.data.message)
				// console.log(1112222, this.recommendListDetial)
			},
			//获取commodity参数
			async getCommodity(callBack) {
				const res = await this.$myRequest({
					url: '/api/public/v1/goods/search?pagenum='+this.pagenum
				})
				// console.log(1112222, res)
				// this.topBar = res.data.message
				// this.recommendList = res.data.message
				// this.recommendListDetial = this.recommendList[0]
				// console.log(1112222)
				// this.commodity = res.data.message.goods.filter(i => i.goods_small_logo != '')
				this.commodity = [...this.commodity,...res.data.message.goods.filter(i => i.goods_small_logo!='')]
				callBack && callBack()
				console.log(222222222, this.commodity)
				// console.log(1112222, this.recommendList)
			},
			changeTab(index){
				if(this.topBarIndex==index){
					return;
				}this.topBarIndex = index;
				this.scrollIntoIndex = 'top'+index 
				
			},
			onchangeTab(e){ 
				console.log(e.detail.current)
				const a = e.detail.current
				// console.log(8888888,a)
				this.changeTab(e.detail.current)
				this.recommendListDetial = this.recommendList[a]
				// console.log(999999999,this.recommendListDetial)
			},
			onReachBottom() {
				if(this.commodity.length<this.pagenum*15) return this.flag = true
				this.pagenum++
				this.getCommodity()
			},
			// 导航到商品详情页
			goGoodsDetail(id) {
				console.log("商品id为：", id)
				uni.navigateTo({
					// url: '/api/public/v1/goods/detail?goods_id=' + id
					url: '/pages/goods-deatil/goods-deatil?id='+id
			
				})
			}

		},
		components: {
			Recommend,
			Card,
			CommodityList
		},
	}
</script>

<style scoped lang="scss" scoped>
	.isOver {
		width: 100%;
		height: 50px;
		line-height: 50px;
		text-align: center;
		// background: #fff;
		font-size: 28rpx;
	}
	.f-active-color{
		padding: 10rpx 0;
		border-bottom: 6rpx solid #49bdFB;
	}
	.scroll-content{
		width: 100%;
		height: 80rpx;
		white-space: nowrap;
	}
	.scroll-item{
		display: inline-block;
		padding: 10rpx 52rpx;
		font-size: 36rpx;
	}
	swiper {
		width: 750rpx;
		height: 380rpx;

		image {
			height: 100%;
			width: 100%;
		}
	}

	/* .wx-nav{
		text-align: center;
		height: 200rpx; 
		width: 100%;
		line-height-step: 200rpx;
	} */
</style>
